<template>

  <div>
    <div class="collections">
      <el-card v-for="item in collections" class="collection-item">
        <div slot="header" class="collection-title" @click="goToDetail(item)">{{ item.rangeName }}</div>
        <div class="collection-desc"> {{ item.rangeDetail }}</div>
            <div v-if="collections.length === 0">
              <p class="p_1">没有添加收藏靶场</p>
            </div>
      </el-card>
    </div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[9, 12, 15]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="pagination">
      </el-pagination>
  </div>
</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
import Cookies from "js-cookie";

export default {
  name: "Collection",
  data() {
    return {
      order: "0",
      currentPage: 1,
      pageSize: 9,
      total: 0,
      collections: []
    }
  },
  methods: {
    //页面展示条数方法
    handleSizeChange(size) {
      this.currentPage = 1;
      this.pageSize = size;
      this.initCollection();
    }
    ,
    //第几页方法
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.initCollection();
    }
    ,
      // 初始化列表
      initCollection() {
        let userToken = Cookies.get('user');
        console.log("userToken/////////////")
        console.log(userToken)

        let params = {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          token: userToken
        }
        console.log(params)
        return this.$axios.post("/collect/searchCollection",params)
            .then((response) => {
              this.collections = response.data.records;
              this.total = response.data.total;
            });
        console.log("this.collections");
      },
      goToDetail(item) {
        this.$router.push({
          name: 'Detail',
          params: { id: item.rangeId },
        });
  }
    },
  created() {
    this.initCollection();
  }
}
</script>

<style scoped>

.pagination{
  text-align: center;
}
.el-pagination {
  text-align: center;
}
.p_1 {
  font-size: 16px;
  text-align: center;
  font-style: italic;
}
.collections {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.collection-item {
  height: 120px;
  cursor: pointer;
}

.collection-title {
  font-size: 18px;
  font-weight: bold;
}

.collection-desc {
  height: calc(100% - 40px);
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 1.5;
}


</style>